<style lang="scss">
	@import '@/assets/css/variable';

	.home {
		width: 100%;
		background-color: white;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: relative;
		flex:1;
		overflow: hidden;
		$radiusSize: 100%;
		display: flex;
		flex-direction: column;
        padding-top: 22px;
		.searchResult{
			.tabbarBox{
				background-color: white;
			}
			.nodata{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 6rem;
				img{
					width: 18rem;
				}
				.text{
					margin-top: 2rem;
					color: #707070;
				}
			}
		}
		
	}
	.van-tabs__wrap {
	    padding-bottom: 0.5rem !important;
	}
	.van-tabs--line {
		.van-tabs__wrap {
		    height: 3.2rem !important;
		}
	}
	.list{
		padding: 0 6px;	
	}
</style>
<template>
	<div class="home">
    <!-- <bar-nav @getBack="getBack" @backHome="backHome" :title="title"></bar-nav> -->
		<search-box @searchEvent="searchEvent"></search-box>
		<!-- searchList&&searchList.length>0 -->
		<!-- <div class="searchResult" v-if="isSearch">
			<div class="list" v-if="searchList&&searchList.length>0">
				<van-list v-model="load[active].loading" :finished="load[active].finished" finished-text="没有更多了" offset="100">
				  <info-list></info-list>
				  <info-list></info-list>
				  <info-list></info-list>
				  <info-list></info-list>
				  <info-list></info-list>
				  <info-list></info-list>
				  <info-list></info-list>
				  <info-list></info-list>
				</van-list>
			</div>
			<div v-else class="nodata">
				<img src="../../assets/img/nodata.png" alt="">
				<div class="text">暂无匹配结果</div>
			</div>
		</div> -->
		<div class="tabbarBox">
			<van-tabs v-model="active" @click="onClickTabs" sticky line-width="24" title-active-color="#335FFC" color="#335FFC">
				<!-- :dot="tabList[index].dot" -->
				<van-tab v-for="item in tabList" :key="item.id" :title="item.name" sticky >
					  
			</van-tab>


        
<!-- v-model="load[active].loading" :finished="load[active].finished" -->
        <div class="list">
          <van-list v-model="loading" @load="onLoad" :finished="finished" finished-text="没有更多了" offset="100">
            <info-list v-for="item in dataList" :key="item.id" :renderList = "item" ></info-list>
          </van-list>
        </div>
			</van-tabs>	
		</div>
	</div>
</template>

<script>
import {Dialog} from 'vant'
import {myMixins} from "@/assets/js/mixins.js"
import SearchBox from '@/components/SearchBox.vue'
import InfoList from '@/components/InfoListMore.vue'
import BarNav from '@/components/BarNav'
import { cloneLoop } from '@/utils/clone'
export default {
	mixins: [myMixins],
	name: "home",
	components: {
		SearchBox,
        InfoList,
        BarNav
	},
	data() {
		return {
      title: '信息公开',
			dot: true,
			show: false,
      pageNo: 1,
      pageSize: 10,
			actions: [{ name: '全部' }, { name: '本星期' }, { name: '本月度' }, { name: '本季度' }, { name: '本年度'} ],
			active: 0,
			tabList: [{
				id: 0,
				name: "全部",
				dot: false
			}],
      tabTitle: '',
			list: [],
			// load:[{
			// 	loading: false,
			// 	finished: true,
			// 	pageNo: 1,
			// },{
			// 	loading: false,
			// 	finished: true,
			// 	pageNo: 1,
			// },{
			// 	loading: false,
			// 	finished: true,
			// 	pageNo: 1,
			// }],
			searchList:[],
			isSearch:false,
      dataList: [],
      loading: false,
      timestamp: null,
      finished: false, 
      loadings: true,
		}
	},
	created() {
    this.datalist()
	this.newsType()
	},
	mounted() {
	},
	beforeDestroy() {
      
	},
	methods: {
    // 请求全部信息
       datalist() {
		   this.$request.getNewsByGroup({
			  params: {
			  pageNo: this.pageNo,
			  pageSize: this.pageSize,
			  groupId: 'ALL'
			}}).then(res => {
        // console.log(res, 223213);
			  let dataList =res.result.records
			  dataList.map(item=>{
				  item.img = this.$request.url(item.img)
				  return item.img
			  })
			  this.dataList = dataList
		  })
		},

    // 请求横向导航栏数据
        newsType() {
        this.$request.NewsType().then(res => {
			  // console.log(res.result, 11111);
			  res.result.forEach(item => {
				let newData={};
				newData.id=item.value;
				newData.name=item.text;
				newData.dot=item.title;
				this.tabList.push(newData)
			});
		  })
		},


    // 切换tab栏
		onClickTabs(index) {
      console.log(index);
       let successList = cloneLoop(this.tabList)
       this.loadings = true
       let arr = []
       successList.forEach(item => {
         arr.push(item.name)
       })
      if(index == 0) {
        return this.datalist()
      }
      this.tabTitle = arr[index]
      this.$request.getNewsByGroup({
			  params: {
			  pageNo: this.pageNo,
			  pageSize: this.pageSize,
			  groupId: index
			}}).then(res => {
			  let dataList =res.result.records
			  dataList.map(item=>{
				  item.img = this.$request.url(item.img)
				  return item.img
			  })
        
        if( dataList.length == 0) {
          this.loadings = false
          this.$toast('没有更多了')
          this.pageNo = 1
        }
			  this.dataList = dataList
		  })
			// this.load[index].loading = false
			// this.load[index].finished = true
			// console.log('this.load[index].loading',this.load[index].loading)
		},
    
		searchEvent(value){
			this.$request.getNewsByGroup({
			  params: {
			  pageNo: this.pageNo,
			  pageSize: this.pageSize,
        groupId: 'ALL',
			  strWhere: value
			}}).then(res => {
				console.log(res);
			  let dataList =res.result.records
			  dataList.map(item=>{
				  item.img = this.$request.url(item.img)
				  return item.img
			  })
			  this.dataList = dataList
		  })
		},

    // 下拉加载更多
    onLoad() {
      if(this.loadings) {
        this.pageNo += 1
        this.$request.getNewsByGroup({
			  params: {
			  pageNo: this.pageNo,
			  pageSize: this.pageSize,
        groupId: 'ALL',
			  strWhere: this.tabTitle,
			}}).then(res => {
				console.log(res);
        if(res.result.records.length == 0) {
          this.$toast('没有更多了')
          this.loadings = false
          this.pageNo = 1
        }  
			  let dataList =res.result.records
			  dataList.map(item=>{
				  item.img = this.$request.url(item.img)
				  return item.img
			  })
			  this.dataList = [...this.dataList, ...dataList]
        if (res.result.records.length) {
          this.loading = false
        } else {
          this.finished = true
        }
		  })
      }
    },




		onSelect(item) {
		  // 默认情况下点击选项时不会自动收起
		  // 可以通过 close-on-click-action 属性开启自动收起
		  this.show = false;
		//   console.log(item.name)
		},
		TaskPage() {
			let params = {
				// avatar: this.form.avatar,
				// nickname: this.form.nickname,
				campus_id: this.userInfo.campus_id,
				status: 1,
			}
			this.$request.TaskPage(params).then(res=>{
				// Dialog({ message: '提示' });
				if(res.ret==200){
					this.infoList = res.data.data
				}
				// else{
				// 	Dialog({ title:'系统提示', message: res.msg });
				// }
			})
		}
	}
};
</script>
